<template>
  <div class="container">
    <div class="left-box">
      <div class="left-box-top">
        <div>
          <i class="el-icon-caret-bottom" />
          <i class="el-icon-folder-opened margin-right-m" /> 全部类别
        </div>
        <i class="el-icon-plus" @click="showAddCategory()" />
      </div>
      <div style="padding-left: 20px; margin-top: 10px">
        <transition-group>
          <div v-for="(item, index) in ACList" :key="index">
            <div
              :class="{
                'left-color-box': true,
                'active-background': index === tabIndex,
              }"
            >
              <div class="left-item">
                <div class="left-lab-box" @click="handleTab(item, index)">
                  <div>
                    <i v-if="item.flag === '0'" class="el-icon-caret-right" />
                    <i v-else class="el-icon-caret-bottom" />
                    <i
                      v-if="item.flag === '0'"
                      class="el-icon-folder margin-right-m"
                    />
                    <i v-else class="el-icon-folder-opened margin-right-m" />
                  </div>
                  <div>{{ item.archCateName }}</div>
                </div>
                <div style="height: 100%" class="item-cate-right">
                  <i
                    class="el-icon-edit width-m"
                    @click="showEditCategory(item)"
                  />
                  <i class="el-icon-plus width-m" @click="showAddDC(item)" />
                </div>
              </div>
            </div>
            <div v-show="item.flag === '1'" class="left-item-box">
              <div
                v-for="(tabItem, tabIndex) in item.archDeptCategoryList"
                :key="tabIndex + 100"
              >
                <div>
                  <i class="el-icon-document margin-right-m" />
                  {{ tabItem.archDeptName }}
                </div>
                <div @click="showEditDC(tabItem)">
                  <i class="el-icon-edit" />
                </div>
              </div>
            </div>
          </div>
        </transition-group>
      </div>
    </div>
    <div class="right-box">
      <div class="top-text">档案内容规范</div>
      <!-- <div style="margin-top: 10px">编码: 2023 - 02 02 - 001 - 001</div> -->
      <div style="margin-top: 10px">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column align="center" prop="value" label="名称" />
          <el-table-column align="center" prop="type" label="类型" />
          <el-table-column align="center" prop="checked" label="是否必填">
            <template slot-scope="scope">
              {{ scope.row.checked ? "必填" : "非必填" }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog
      :title="addCTitle"
      :visible.sync="archCategoryDialog"
      width="50%"
    >
      <div>
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="addRules"
          label-position="left"
          label-width="70px"
        >
          <el-form-item label="分类名" prop="archCateName">
            <el-input v-model="addForm.archCateName" style="width: 30vw" />
          </el-form-item>
          <el-form-item label="类型">
            <el-radio
              v-model="addForm.archCateType"
              label="0"
            >首页可见</el-radio>
            <el-radio
              v-model="addForm.archCateType"
              label="1"
            >首页不可见</el-radio>
            <el-radio v-model="addForm.archCateType" label="5">禁用</el-radio>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="addForm.notes" type="textarea" :rows="3" />
          </el-form-item>
        </el-form>
      </div>
      <div>
        <label>归档规范信息</label>
        <div
          v-for="(domain, index) in dynamicValidateForm.domains"
          :key="domain.key"
          :prop="'domains.' + index + '.value'"
          style="padding-left: 10px; margin-top: 10px"
        >
          名称:
          <el-input
            v-model="domain.value"
            :disabled="index < 3"
            style="width: 160px; margin-right: 10px"
            size="small"
          />
          类型:
          <el-select
            v-model="domain.type"
            :disabled="index < 3"
            placeholder="请选择类型"
            style="margin-right: 10px"
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          是否必填<el-checkbox
            v-model="domain.checked"
            :disabled="index < 3"
            style="margin-left: 5px; margin-right: 10px"
            size="small"
          />
          <!-- 默认值:
          <el-input
            v-model="domain.default"
            style="width: 180px; margin-right: 10px"
            size="small"
          ></el-input> -->
          <el-button
            v-show="index > 2"
            style="margin-left: 10px"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
            @click.prevent="removeDomain(domain)"
          />
        </div>
      </div>
      <!-- <div style="margin-top: 10px">
        新增其他归档规范
        <el-button @click="addDomain" icon="el-icon-plus" size="small" circle style="margin-left: 10px"></el-button>
      </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          @click="archCategoryDialog = false"
        >取 消</el-button>
        <el-button
          type="primary"
          size="small"
          style="margin-top: 10px"
          @click="addCategory()"
        >提交</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="addDCTitle" :visible.sync="addDCDialog" width="40%">
      <el-form :model="addDCForm" label-position="right" label-width="40px">
        <el-form-item label="部门">
          <el-select
            v-model="addDCForm.archDeptName"
            class="search-input"
            :disabled="DCdisable"
            filterable
            size="small"
            placeholder="请选择部门"
            @change="handleSelectArchDept"
          >
            <el-option
              v-for="item in dpData"
              :key="item.archDeptName"
              :label="item.archDeptName"
              :value="item.archDeptCode"
            >
              <span>{{ item.archDeptName }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-radio
            v-model="addDCForm.archDeptClassType"
            label="0"
          >可用</el-radio>
          <el-radio
            v-model="addDCForm.archDeptClassType"
            label="5"
          >禁用</el-radio>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="addDCForm.notes" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <div style="margin-top: 10px" />
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addDCDialog = false">取 消</el-button>
        <el-button type="primary" size="small" @click="addDC()">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllArchDept } from '@/api/archDept'
import {
  addCategory,
  updateCategory,
  getDeptWithCate
} from '@/api/archCategory'
import {
  addDeptCategory,
  updateDeptCategory
} from '@/api/archDeptCate'
export default {
  components: {},
  data() {
    return {
      isLoading: true,
      curACType: 0,
      addForm: {
        archCateName: '',
        notes: '',
        archCateType: '0'
      },
      archCategoryDialog: false,
      DCList: [],
      dpData: [],
      addDCForm: {
        archDeptName: '',
        notes: '',
        archDeptClassType: '0'
      },
      selectDept: {},
      addDCNotes: '',
      addCTitle: '',
      archDeptClassType: '0',
      addDCTitle: '',
      DCdisable: false,
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 10
      },
      addRules: {
        archCateName: [
          { required: true, message: '请输入分类名', trigger: 'blur' }
        ]
      },
      staticCategoryForm: {
        domains: [
          {
            id: 1,
            value: '标题',
            type: '文本',
            checked: true,
            content: '水库预算',
            default: ''
          },
          {
            id: 2,
            value: '交付部门',
            type: '文本',
            checked: true,
            content: '水库',
            default: ''
          },
          {
            id: 3,
            value: '保存期(月)',
            type: '数字',
            checked: true,
            content: '60',
            default: '6'
          }
        ]
      },
      dynamicValidateForm: {},

      addDCDialog: false,
      dept: '',
      value: '',
      currentName: '文书',
      currentValue: '01',
      options: [
        {
          value: '文本',
          label: '文本'
        },
        {
          value: '数字',
          label: '数字'
        }
      ],
      tableData: [
        {
          value: '标题',
          type: '文本',
          checked: true,
          default: ''
        },
        {
          value: '交付部门',
          type: '文本',
          checked: true,
          default: ''
        },
        {
          value: '保存期(月)',
          type: '数字',
          checked: true,
          default: '6'
        }
      ],
      tabIndex: 0,
      archCateName: '',
      ACList: []
    }
  },
  created() {
    this.isLoading = true
    // this.getAllCategory()
    this.getDept()
    this.getDeptWithCate()
  },
  methods: {
    getDept() {
      getAllArchDept({ pageNum: -1, pageSize: -1 }).then((res) => {
        if (res.code === '0') {
          this.dpData = res.data.records
        }
      })
    },
    getDeptWithCate() {
      getDeptWithCate().then((res) => {
        this.ACList = res.data
        this.ACList[0].flag = '1'
      })
    },
    // 点击展开
    handleTab(row, index) {
      this.ACList[this.tabIndex].flag = '0'
      row.flag = '1'
      this.tabIndex = index
    },
    handleSelectArchDept(val) {
      this.selectDept = this.dpData.find((item) => item.archDeptCode === val)
    },
    // 新增部门档案分类
    showAddDC(item) {
      this.archCateName = item.archCateName
      this.archCateCode = item.archCateCode
      this.addDCTitle = '新增部门档案分类'
      this.addDCForm = {
        archDeptName: '',
        notes: '',
        archDeptClassType: '0'
      }
      this.addDCDialog = true
    },
    // 编辑部门档案分类
    showEditDC(row) {
      console.log(row)
      this.addDCTitle = '编辑部门档案分类'
      this.addDCForm = { ...row }
      this.archCateName = row.archCateName
      this.selectDept = this.dpData.find(
        (dp) => dp.archDeptName === this.addDCForm.archDeptName
      )
      this.addDCForm.archDeptClassType = row.archDeptClassType + ''
      this.addDCDialog = true
    },
    addDC() {
      if (!this.addDCForm.archDeptName) {
        this.$message({
          message: '请选择部门',
          type: 'warning'
        })
        return
      }
      console.log(this.addDCForm)
      const param = {
        archDeptName: this.selectDept.archDeptName,
        notes: this.addDCForm.notes,
        archDeptClassType: this.addDCForm.archDeptClassType,
        archCateName: this.archCateName,
        archDeptCateCode:
          this.addDCForm.archDeptName +
          '-' +
          this.archCateCode
      }
      if (this.addDCTitle === '新增部门档案分类') {
        addDeptCategory(param).then((response) => {
          if (response.code === '0') {
            this.$message({
              message: '新增成功',
              type: 'success'
            })
            this.addDCDialog = false
            this.getDeptWithCate()
          }
        })
      } else {
        param.archDeptCateCode = this.addDCForm.archDeptCateCode
        const editParam = {
          ...param,
          archDeptCatId: this.addDCForm.archDeptCatId
        }
        updateDeptCategory(editParam).then((response) => {
          if (response.code === '0') {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.addDCDialog = false
            this.getDeptWithCate()
          }
        })
      }
    },
    // 新增档案分类
    showAddCategory() {
      this.addCTitle = '新增档案分类'
      this.dynamicValidateForm = this.staticCategoryForm
      this.addForm = {
        archCateName: '',
        notes: '',
        archCateType: '0'
      }
      this.archCategoryDialog = true
    },
    // 编辑档案分类
    showEditCategory(item) {
      this.addCTitle = '编辑档案分类'
      this.dynamicValidateForm = this.staticCategoryForm
      this.addForm = {
        archCateName: item.archCateName,
        notes: item.notes,
        archCateType: item.archCateType + ''
      }
      this.archCategoryDialog = true
    },
    addCategory() {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          let param = {
            ...this.addForm
          }
          if (this.addCTitle === '新增档案分类') {
            addCategory(param).then((res) => {
              if (res.code === '0') {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.archCategoryDialog = false
                this.getDeptWithCate()
              }
            })
            return
          }
          const curACType = parseInt(this.curACType)
          param = {
            ...this.addForm,
            archCateId: this.ACList[curACType].archCateId
          }
          // 编辑档案分类
          updateCategory(param).then((res) => {
            if (res.code === '0') {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.archCategoryDialog = false
              this.getDeptWithCate()
            }
          })
        }
      })
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        type: '',
        default: '',
        checked: false,
        key: Date.now()
      })
    },
    // 保存规范
    save() {
      this.archCategoryDialog = false
      this.tableData = this.dynamicValidateForm.domains
      this.dynamicValidateForm = {
        domains: [
          {
            value: '',
            type: '',
            checked: false,
            default: ''
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  padding: 20px;
}

.left-box {
  /* flex: 1; */
  width: 300px;
  /* padding-top: 10px; */
  /* border-right: 1px solid #eee; */
  height: calc(100vh - 100px);
}

.top-text {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  width: auto;
}

div + .top-text {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid #eee;
}

.right-box {
  margin-left: 10px;
  flex: 15;
  width: 50%;
}

.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
div /deep/ .el-dialog {
  margin-top: 40px !important;
  border-radius: 8px;
}
div /deep/ .el-dialog__body {
  padding: 0 25px;
}
.left-item {
  display: flex;
  align-items: center;
  padding-right: 10px;
}
.left-color-box :hover {
  cursor: pointer;
  background-color: #f5f7fa;
}

.left-lab-box {
  display: flex;
  align-items: center;
  height: 30px;
  width: 100%;
}
.left-item-box {
  padding-left: 30px;
}
.left-item-box div {
  height: 30px;
  display: flex;
  padding-right: 6px;
  align-items: center;
  justify-content: space-between;
}
.left-item-box div i {
  cursor: pointer;
}
.left-item-box div i:hover {
  color: #448ef7;
}
.margin-right-m {
  margin-right: 5px;
}
.item-cate-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.item-cate-right i {
  text-align: right;
}
.width-m {
  width: 30px;
}
.left-box-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 10px;
}
.active-background {
  background-color: #f5f7fa;
}
</style>
